<template>
  <h1>员工列表练习</h1>
  姓名：<input type="text" placeholder="请输入员工姓名" v-model="emp.name">&nbsp
  工资：<input type="text" placeholder="请输入员工工资 (输入数字)" v-model="emp.salary">&nbsp
  岗位：<input type="text" placeholder="请输入员工岗位" v-model="emp.job"> &nbsp
  <button @click="add">点此添加</button>
  <hr>
  <table border="1px" align="center">
    <caption>员工表</caption>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>工资</th>
      <th>岗位</th>
    </tr>
    <tr v-for="(e,index) in arrEmp">
      <td>{{index+1}}</td>
      <td>{{e.name}}</td>
      <td>{{e.salary}}</td>
      <td>{{e.job}}</td>
    </tr>
  </table>
</template>

<script setup>
  import {ref} from "vue";

  const emp = ref({name:'',salary:'',job:''});
  const arrEmp = ref([]);
  const add =()=>{
    if(emp.value.name.trim() == ''||emp.value.salary == ''||emp.value.job == ''){
      return alert("有信息未输入");
    }
    if(!/^\d+$/.test(emp.value.salary)){
      emp.value.salary='';
      return alert("工资栏格式不正确，请重新输入");
    }
    arrEmp.value.push(emp.value);
    emp.value = {name:'',salary:'',job:''};
  }
</script>

<style scoped>

</style>